<template>
  <a-tabs style="background-color: white" v-model:active-key="currentPage" size="mini">
    <a-tab-pane v-for="item of tabList" :key="item.value" :title="setTitle(item)" />
  </a-tabs>

  <OrderTableBody :orderTagNum="orderTagNum" :getNum="getNum" :currentIndex="currentPage" />
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs } from 'vue'
  import { countOrderStatusNum } from '@/api/order'
  import OrderTableBody from './components/tableBody.vue'
  interface itemType {
    label: string
    num?: string
    value: string
  }
  export default defineComponent({
    components: {
      OrderTableBody,
    },
    setup() {
      const data: any = reactive({
        currentPage: 'VIR_FBM_ALL',
        tabList: [
          { label: '全部', value: 'VIR_FBM_ALL' },
          { label: '待审核', num: '', value: 'UNSHIPPED_TOCHECK' },
          { label: '待发货', num: '', value: 'UNSHIPPED_TOSHIP' },
          { label: '部分发货', num: '', value: 'UNSHIPPED_PARTLY' },
          { label: '全部发货', num: '', value: 'SHIPPED' },
          { label: '已取消', num: '', value: 'CANCELED' },
          { label: '退款退货', num: '', value: 'RETURN_GOODS,RETURN_AMT' },
        ],
        orderTagNum: 0,
        status: '',
      })

      const setTitle = (item: itemType) => {
        if (item.num) {
          return `${item.label}(${item.num})`
        } else {
          return `${item.label}`
        }
      }

      const getNum = async () => {
        const res: any = await countOrderStatusNum()
        data.orderTagNum = res?.data?.toCheck || 0
        data.tabList[1].num = res?.data?.toCheck || 0
        data.tabList[2].num = res?.data?.toShip || 0
        data.tabList[3].num = res?.data?.partlyToShip || 0
        data.tabList[4].num = res?.data?.shipped || 0
        data.tabList[5].num = res?.data?.canceled || 0
        data.tabList[6].num = res?.data?.returnAmt || 0 + res?.data?.returnGoods || 0
      }

      getNum()

      return {
        ...(toRefs(data) as any),
        setTitle,
        getNum,
      }
    },
  })
</script>

<style lang="less" scoped></style>
